<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>发布详情</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
	<style type="text/css">
		body {
			background-color: #F6F6F6;
		}

		.swiper-pagination {
			bottom: 0;
			width: 100%;
		}

		.swiper-pagination-bullet {
			width: 0.2rem;
			height: 0.2rem;
			margin-right: 0.3rem;
			background:rgba(0,0,0,0.23);
		}

		.swiper-pagination-bullet-active {
			background: #FFFFFF;
			opacity: 1;
		}

		.flex-row-center {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.flex-row-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			padding-top: 1rem;
			padding-bottom: 0.75rem;
		}

		.aui-bar-tab-item img {
			width: 1.1rem;
			display: inline-block;
			vertical-align: middle;
		}

		.btn-item {
			line-height: 1.95rem;
			text-align: center;
			font-size: .75rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.btn-item:nth-child(1) {
			display: inline-block;
			width: 45%;
			height: 1.95rem;
			border-top-left-radius: 1.5rem;
			border-bottom-left-radius: 1.5rem;
			border: 1px solid #72D5EF;
			margin-top: .25rem;
		}

		.btn-item:nth-child(2) {
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			display: inline-block;
			width: 45%;
			height: 1.95rem;
			border-top-right-radius: 1.5rem;
			border-bottom-right-radius: 1.5rem;
			border: 1px solid #72D5EF;
			margin-top: .25rem;
		}

		.swiper-pagination {
			width: 2.05rem;
			height: 1.15rem;
			background: rgba(0, 0, 0, 0.23);
			border-radius: 0.57rem;
			font-size: 0.5rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 1.15rem;
			position: absolute;
			bottom: 0.75rem;
			left: 15.95rem;
		}

		.swiper-pagination-bullet {
			width: 0.2rem;
			height: 0.2rem;
			margin-right: 0.3rem;
			background: #FFFFFF;
			opacity: 0.46;
		}

		.swiper-pagination-bullet-active {
			background: #FFFFFF;
			opacity: 1;
		}

		.flex-row-center {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.flex-row-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			padding-top: 1rem;
			padding-bottom: 0.75rem;
		}

		.aui-bar-tab .aui-bar-tab-label {
			display: inline-block;
			font-size: .7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.aui-bar-tab-item img {
			width: 1.1rem;
			display: inline-block;
			vertical-align: middle;
		}

		.img-inlineblock img {
			display: inline-block;
			vertical-align: sub;
		}

		.foot-img img {
			display: inline-block;
			width: 1.1rem;
		}

		.aui-bar-tab .aui-bar-tab-item {
			display: table-cell;
			position: relative;
			width: 1%;
			padding-top: .8rem;
			text-align: center;
			vertical-align: middle;
		}

		.line_active {
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}
		/*改写*/

		.left_img {
			width: 1.4rem;
			height: 1.4rem;
			margin-right: 0.5rem;
			border-radius: 50%;
			flex-shrink: 0;
		}

		.left_img img {
			width: 1.4rem;
			height: 1.4rem;
			border-radius: 50%;
			flex-shrink: 0;
		}

		.right_cont {
			/*padding-bottom: 0.75rem;*/
			margin-bottom: 0.5rem;
		}

		.expext_last_bottom {
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}

		.expext_last_margin_bottom {
			margin-bottom: 0.8rem;
		}

		.nickname_title {
			font-size: 0.65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
			line-height: 0.9rem;
			margin-bottom: 0.25rem;
		}

		.content_main {
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(68, 68, 68, 1);
			line-height: 1.2rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			/*margin-bottom: 0.5rem;*/
		}

		.content_main img {
			display: inline-block;
			vertical-align: sub;
		}

		.replay_count {
			height: 1.7rem;
			background: rgba(246, 246, 246, 1);
			border-radius: 0.3rem;
			font-size: 0.65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(114, 213, 239, 1);
			padding-left: 0.75rem;
			line-height: 1.7rem;
			/*margin-bottom: 0.55rem;*/
			margin-left: 1.8rem;
			margin-bottom: 0.55rem;
			/*display: block;*/
			/*width: auto;*/
		}

		.footer_wraper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 1.8rem;
			padding-bottom: 0.75rem;
		}

		.right_zan {
			display: flex;
			align-items: center;
		}

		.left_addtime {
			font-size: 0.55rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 0.8rem;
		}

		.zan_style {
			font-size: 0.6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			display: inline-block;
			margin-left: 0.15rem;
		}

		.no_comment {
			padding-top: 1.75rem;
			text-align: center;
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			line-height: 1.05rem;
			padding-bottom: 2.5rem;
		}

		.no_comment img {
			width: 5.5rem;
			height: 5rem;
			margin: 0 auto;
			margin-bottom: 0.5rem;
		}

		.edit_btn {
			height: 2.45rem;
			background: rgba(255, 255, 255, 1)!important;
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit_btn div:nth-child(1) {
			width: 8.6rem;
			height: 1.95rem;
			border-radius: 1.55rem 0rem 0rem 1.55rem;
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(0,90,147,1);
			text-align: center;
			line-height: 1.95rem;
			border:0.05rem solid rgba(0,90,147,1);
/*border-image:linear-gradient(135deg, rgba(132,229,255,1), rgba(107,180,255,1), rgba(122,174,229,1)) 0.05 0.05;*/
		}

		.edit_btn div:nth-child(2) {
			width: 8.6rem;
			height: 1.95rem;
			background: rgba(0,90,147,1);
			border-radius: 0rem 1.55rem 1.55rem 0rem;
			font-size: 0.75rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 1.95rem;
		}
		.pic-video {
			/*display: inline-block;*/
			/*height: 18.75rem;*/
			width: 100%;
			/*background-color: #fff;*/
			overflow: hidden;
			position: relative;
			/*transform: translateY(1rem);*/
		}

		.pv-btn {
			width: 5rem;
			height: 1.1rem;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			bottom: .65rem;
			z-index: 99;
			display: flex;
			font-family:PingFangSC-Regular;
			font-size: .55rem;
			text-align: center;
			color: #333333;
			font-weight:400;
		}
		.haha{
			background: url('../../image/bg/zhanwei.png');
			background-size: 100%;
		}
		.video_play .play_btn{
			position: absolute;
			z-index: 99;
			left: calc(50% - 1.4rem);
			top: calc(50% - 1.4rem);
		}

		.pv-btn>div:nth-child(1) {
			flex: 1;
			margin-right: .5rem;
		}

		.pv-btn>div:nth-child(1)>span {
			display: inline-block;
			width: 2.35rem;
			height: 1.1rem;
			line-height: 1.1rem;
			border-radius: .55rem;
			line-height: 1.1rem;
			background-color: #fff;
		}

		.pv-btn>div:nth-child(2)>span {
			display: inline-block;
			width: 2.35rem;
			height: 1.1rem;
			line-height: 1.1rem;
			border-radius: .55rem;
			background-color: #fff;
			line-height: 1.1rem;
		}
		.tab_video_img {
			display: flex;
		}

		.tab_video_img>div {
			width: 47px;
			height: 22px;
			text-align: center;
			background-color: #FFFFFF;
			border-radius: 11px;
			color: #333333;
			font-size: 11px;
		}

		.tab_video_img span {
			line-height: 22px;
		}

		.tab_video_img_active {
			background: -webkit-linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* Firefox 3.6 - 15 */
			background: linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* 标准的语法（必须放在最后） */
			color: #FFFFFF!important;
		}

		.tab_video_img>div:nth-of-type(1) {
			position: absolute;
			left: 136px;
			bottom: 88px;
			z-index: 1000;
		}

		.tab_video_img>div:nth-of-type(2) {
			position: absolute;
			left: 193px;
			bottom: 88px;
			z-index: 1000;
		}

		.fox {
			color: #fff !important;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
		}
		.video_wraper{
			width:100%;
			height:18.75rem;
		}

	</style>
</head>

<body>
	<!-- 审核不通过的发布详情页面 -->
	<div id="app" v-cloak="">
		<!-- <header v-show="info.catid==2&&info.img_path.length>0 || info.catid==1" id="aui-header" class="aui-bar aui-bar-nav ming-bg-opacity0" style="position: fixed;z-index: 10;padding-top: 2rem;background-color:#fff;">
				<a class="aui-pull-left" tapmode onclick="close_win()" style="margin-left:.75rem;padding:0;margin-top:-.1rem;">
					<img class="btn-img-back" src="../../image/btn/btn-back.png" />
				</a>
				<span style="flex:1;text-align:center;font-size:.9rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);box-sizing:border-box;margin-right:1.8rem;">发布详情</span>
			</header>
			<header v-show="info.catid==2&&info.img_path.length==0" id="aui-header" class="aui-bar aui-bar-nav ming-bg-opacity0" style="position: fixed;z-index: 10;padding-top: 2rem;background-color:#fff;">
				<a class="aui-pull-left" tapmode onclick="close_win()" style="margin-left:.75rem;padding:0;margin-top:-.1rem;">
					<img class="btn-img-back" src="../../image/btn/btn-back.png" />
				</a>
				<span style="flex:1;text-align:center;font-size:.9rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);box-sizing:border-box;margin-right:1.8rem;">发布详情</span>
			</header> -->
		<div id="aui-header" class="ming-bg-blue">
			<header class="aui-bar aui-bar-nav ming-bg-blue aui-border-b" style="">
				<a class="aui-pull-left" tapmode onclick="close_win()" style="margin-left:.75rem;padding:0;">
					<img class="btn-img-back" src="../../image/btn/btn-back.png" />
				</a>
				<div class="aui-title">
					<div class="aui-text-linear" style="font-size:0.9rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);">
						发布详情
					</div>
				</div>
				<!-- <a class="aui-pull-right" tapmode onclick="share()" style="margin-right:.75rem;padding:0;">
						<img class="btn-img-back" src="../../image/btn/dots.png" />
					</a> -->
			</header>
		</div>
		<!-- 发布的图片 -->
		<!-- <div class="" style="position: relative;">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div v-if="info.catid==1" class="swiper-slide" style="width:18.75rem;height:18.75rem;">
						<img style="width:100%;height:100%;object-fit:cover" :src="info.cover" />
					</div>
					<div v-if="info.catid==2" v-for="vo in info.img_path" class="swiper-slide" style="width:18.75rem;height:18.75rem;">
						<img style="width:100%;height:100%;object-fit:cover" :src="vo" />
					</div>
				</div>
			</div>
			<div class="swiper-pagination" style=""></div>
		</div> -->
		<!-- 视频跟图片都存在的情况 -->
		<div class="pic-video" style="" v-if="info.video_path.length>0 && info.share_pic.length>0">
			<!-- 视频//图片 切换按钮 -->
			<div class="pv-btn">
				<div><span @click="tabId=0" :class="{'fox':tabId==0}">视频</span></div>
				<div style="flex:1;"><span @click="tabId=1" :class="{'fox':tabId==1}">图片</span></div>
			</div>
			<!-- 视频//图片切换显示部分 -->
			<div class="tab-con">
				<!-- 视频部分 -->
				<div v-for="(vo,index) in info.video_path" v-show="tabId===0" class="video_wraper" v-if="index == 0" >
					<div class="video_play"  style="width:18.75rem;height:18.75rem;" :style="{backgroundImage: 'url('+ vo +')',backgroundSize:'cover'}">
						<!-- <img :src="vo" alt="width:auto;height:100%;object-fit: cover;" > -->
						<img @click="videoPlay(index,info.video)" class="play_btn" src="../../image/bg/bg_video.png" alt="" style="width:2.8rem;height:2.8rem;">
					</div>
				</div>
				<!-- 图片部分 -->
				<div v-show="tabId===1" style="width:100%;height:18.75rem;">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div v-for="vo in info.share_pic" class="swiper-slide" style="width:100%;height:18.75rem;">
								<img :src="vo" style="width:100%;height:100%;object-fit: cover;" />
							</div>
						</div>
					</div>

					<div class="swiper-pagination" style="background-color:rgba(0,0,0,.4);color:#fff;"></div>
				</div>
			</div>
		</div>
		<!-- 只存在视频的情况 -->
		<div v-for="(vo,index) in info.video_path" class="video_wraper" v-else-if="info.video_path.length>0" style="position:relative">
			<div class="video_play"  style="width:18.75rem;height:18.75rem;" :style="{backgroundImage: 'url('+ vo +')',backgroundSize:'cover'}">
				<!-- <img :src="vo" alt="width:auto;height:100%;object-fit: cover;" > -->
				<img @click="videoPlay(index,info.video)" class="play_btn" src="../../image/bg/bg_video.png" alt="" style="width:2.8rem;height:2.8rem;">
			</div>
		</div>
		<!-- 只存在图片的情况下 -->
		<div style="width:18.75rem;height:18.75rem;position:relative" v-else-if="info.share_pic.length>0">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div v-for="vo in info.share_pic" class="swiper-slide" style="width:18.75rem;height:18.75rem;">
						<img :src="vo" style="width:auto;height:100%;object-fit: cover;" />
					</div>
				</div>
			</div>
			<div v-if="info.share_pic.length>1" class="swiper-pagination" style="background-color:rgba(0,0,0,.4);color:#fff;"></div>
		</div>
		<!-- 发布内容块 -->
		<div style="padding:0 .75rem;background:#ffffff;border:0.1px solid transparent;">
			<!-- 发布的标题 -->
			<div id="title" class="aui-ellipsis-2" v-html="info.title" style="font-size:1rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);margin-top: 0.75rem;margin-bottom: 0.5rem;">
			</div>
			<!-- 头像\昵称\时间 -->
			<div class="flex-row-center" style="height: 2rem;">
				<div class="" style="width: 1.8rem;margin-right:0.25rem;">
					<img :src="info.avatar" class="aui-img-round">
				</div>
				<div class="" style="display:flex;width:100%;height:100%;">
					<div class="" style="flex:6;display:flex;flex-direction:column;overflow:hidden;">
						<span style="flex:1;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
									{{info.nickname}}
							</span>
						<span v-if="info.remark" class="aui-ellipsis-1" style="flex:1;font-size:.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(187,187,187,1);">
									{{info.remark}}
							</span>
						<span v-else class="aui-ellipsis-1" style="flex:1;font-size:.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(187,187,187,1);">
									暂无简介
							</span>
					</div>
					<div class="" style="flex:4;font-size:.5rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(187,187,187,1);position:relative;">
						<span style="display:inline-block;margin-top:.4rem;text-align:right;position:absolute;right:0;">
									{{info.create_time}}
							</span>
					</div>
				</div>
			</div>
			<!-- 发布的内容 -->
			<div class="" style="margin:1rem 0;">
				<div v-html="info.content&&info.content.replace(/\n/g, '<br/>')" style="margin-right:.5rem;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(68,68,68,1);">
				</div>
			</div>
		</div>
		<!-- 删除 重新编辑按钮 -->
		<div class="edit_btn" >
			<div class="" tapmode onclick="del_xiaoyouxiu()">
				删除
			</div>
			<div class="" tapmode @click="openWin_publish_edit(id)">
				重新编辑
			</div>
		</div>


	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-sharebox.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			id: 0,
			info: {},
			share_pic: '',
			pic_done: false,
			content: '',
			tabId:1
		},
		methods: {
			videoPlay:function(index,video){
				openWin('circle/video_new', {video:video[index]})
			},
			get_list: function() {
				get_data('api/xiaoyouquan/xyqDetail', {
					token: $api.getStorage('token'),
					id: vm.id
				}, function(ret) {
					if (ret.status) {
						vm.info = ret.data
						setTimeout(function() {
							var swiper = new Swiper('.swiper-container', {
								pagination: '.swiper-pagination',
								paginationType: 'fraction',
								autoplay: false, //可选选项，自动滑动
								loop: true, //可选选项，是否循环
								autoplayDisableOnInteraction: false, //注意此参数，默认为true
							});
							$api.fixStatusBar($api.byId('aui-header'))
						}, 100)
					}
				})
			}
		}
	})
	apiready = function() {
		$api.fixTabBar($api.byId('footer'))
		vm.id = $api.getStorage('id')
		vm.get_list()
	};

	function del_xiaoyouxiu() {
		var dialog = new auiDialog();
		dialog.alert({
			title: "提示",
			msg: '确定要删除吗？',
			buttons: ['取消', '确定'],

		}, function(ret) {
			if (ret) {
				if (ret.buttonIndex == '2') {
					get_data('api/xiaoyouquan/xyqDelPublish', {
						token: $api.getStorage('token'),
						id: vm.id
					}, function(ret) {
						if (ret.status) {
							toast(ret.msg)
							send_event('publishok')
							delay_close()
						}
					})
				}
			}
		})
	}
</script>

</html>
